<template>
  <div class="container">
    <!--顶部盒子-->
    <div class="top">
      <ul class="tab_box">
        <li :class="tab1Class" @click="handleTabClick(1)">工程计量</li>
        <li :class="tab2Class" @click="handleTabClick(2)">现场管理</li>
      </ul>
      <div class="top_center">{{this.title}}</div>
      <ul class="weather">
        <li>{{this.dateYear}} <span>{{this.dateDay}}  </span><span>{{this.dateWeek}}</span></li>
      </ul>
    </div>
    <!--第一页中间部分的盒子-->
    <div class="main_box" v-show="this.index">
      <div class="main_left">
        <div class="left_top">
          <span class="j_1"></span>
          <span class="j_2"></span>
          <span class="j_3"></span>
          <span class="j_4"></span>
          <div class="title"><img src="~@/assets/screen/screen1/images/page1/icon5.png"/>完成情况</div>
          <div class="data_num_box">
            <div class="data_box1">
              <div class="data_title">本月完成</div>
              <font class="font qianlan" face="font01">{{projectData.data1.currentTotal}}</font>
              <span>万元</span>
              <div class="j1_box1" style="display: none">
                <span class="j1_1"></span>
                <span class="j1_2"></span>
                <span class="j1_3"></span>
                <span class="j1_4"></span>
              </div>
            </div>
            <div class="data_box2">
              <div class="data_title">累计完成</div>
              <font class="font shenlan" face="font01">{{projectData.data1.currentEndTotal}}</font>
              <span>万元</span>
              <div class="j1_box2">
                <span class="j1_1"></span>
                <span class="j1_2"></span>
                <span class="j1_3"></span>
                <span class="j1_4"></span>
              </div>
            </div>
          </div>
          <div id="echarts_data1">

          </div>
        </div>
        <div class="left_bottom">
          <span class="j_1"></span>
          <span class="j_2"></span>
          <span class="j_3"></span>
          <span class="j_4"></span>
          <div class="title"><img src="~@/assets/screen/screen1/images/page1/icon6.png" />完成进度</div>
          <div id="progress1_chart"></div>
        </div>
      </div>

      <div class="main_center">
        <div class="center_top">
          <span class="j_1"></span>
          <span class="j_2"></span>
          <span class="j_3"></span>
          <span class="j_4"></span>
          <div class="title"><img src="~@/assets/screen/screen1/images/page1/icon3.png" />电子地图</div>
          <div id="center_map">
          </div>
        </div>
        <div class="center_bottom">
          <span class="j_1"></span>
          <span class="j_2"></span>
          <span class="j_3"></span>
          <span class="j_4"></span>
          <div class="title"><img src="~@/assets/screen/screen1/images/page1/icon2.png" />社区数据接入</div>
        </div>
      </div>

      <div class="main_right">
        <div class="right_top">
          <span class="j_1"></span>
          <span class="j_2"></span>
          <span class="j_3"></span>
          <span class="j_4"></span>
          <div class="title"><img src="~@/assets/screen/screen1/images/page1/icon4.png" />机构单位</div>
          <div class="data_sjjm">
            <div class="data_box2">
              <div class="data_title">施工单位</div>
              <font class="font qianlan" face="font01">5</font>
              <span>个</span>
            </div>
            <div class="data_box2">
              <div class="data_title">监理单位</div>
              <font class="font shenlan" face="font01">2</font>
              <span>个</span>
            </div>
            <div class="data_box2">
              <div class="data_title">业主单位</div>
              <font class="font zise" face="font01">1</font>
              <span>个</span>
            </div>
          </div>
        </div>
        <div class="right_bottom">
          <span class="j_1"></span>
          <span class="j_2"></span>
          <span class="j_3"></span>
          <span class="j_4"></span>
          <div class="title"><img src="~@/assets/screen/screen1/images/page1/icon1.png" />热门库</div>
          <div class="qiuqiu">
            <img src="~@/assets/screen/screen1/images/page1/qiuqiu.png" />
          </div>
          <div id="jindu2">

          </div>
        </div>
      </div>

    </div>
    <!--第二页中间部分的盒子-->
    <div class="main_box2" v-show="!index">
      <div class="top_box">
        <div class="top_box_left">
          <span class="j_1"></span>
          <span class="j_2"></span>
          <span class="j_3"></span>
          <span class="j_4"></span>
          <div class="title"><img src="~@/assets/screen/screen1/images/page2/icon2.png" />视频监控</div>
          <div class="community">

          </div>
        </div>

        <div class="top_box_center">
            <div class="p2_cT">
              <span class="j_1"></span>
              <span class="j_2"></span>
              <span class="j_3"></span>
              <span class="j_4"></span>
              <div class="title"><img src="~@/assets/screen/screen1/images/page2/icon2.png" />劳务工数据</div>
              <ul class="p2_cT_box">
                <li>
                  <div class="p2_cT_title">本月进场</div>
                  <span class="block block1">
										<font class="font2 huise" face="font01">0</font>
									</span>
                  <span class="block">
										<font class="font2 huise" face="font01">0</font>
									</span>
                  <span class="block">
										<font class="font2 huise" face="font01">5</font>
									</span>
                  <span class="block">
										<font class="font2 huise" face="font01">3</font>
									</span>
                  <span class="block">
										<font class="font2 huise" face="font01">3</font>
									</span>
                  <span class="ren">人</span>
                </li>
                <li>
                  <div class="p2_cT_title">在场人数</div>
                  <span class="block block1">
										<font class="font2 zise" face="font01">0</font>
									</span>
                  <span class="block">
										<font class="font2 zise" face="font01">1</font>
									</span>
                  <span class="block">
										<font class="font2 zise" face="font01">2</font>
									</span>
                  <span class="block">
										<font class="font2 zise" face="font01">3</font>
									</span>
                  <span class="block">
										<font class="font2 zise" face="font01">4</font>
									</span>
                  <span class="ren">人</span>
                </li>
                <li>
                  <div class="p2_cT_title">离场人数</div>
                  <span class="block block1 block_o">
										<font class="font2 huangse" face="font01">5</font>
									</span>
                  <span class="block block_o">
										<font class="font2 huangse" face="font01">6</font>
									</span>
                  <span class="block block_o">
										<font class="font2 huangse" face="font01">7</font>
									</span>
                  <span class="block block_o">
										<font class="font2 huangse" face="font01">8</font>
									</span>
                  <span class="block block_o">
										<font class="font2 huangse" face="font01">9</font>
									</span>
                  <span class="ren">人</span>
                </li>
              </ul>
            </div>
            <div class="p2_cB">
              <span class="j_1"></span>
              <span class="j_2"></span>
              <span class="j_3"></span>
              <span class="j_4"></span>
              <div class="title"><img src="~@/assets/screen/screen1/images/page2/icon4.png" />工种统计</div>

              <div id="Cake"></div>
              <ul class="home_data">
                <li class="home_data_one">
                  <div class="home_data_num">
                    <font class="font1 shenlan" face="font01">456</font>
                    <span>人</span>
                  </div>
                  <div class="home_data_name">普工</div>
                </li>
                <li class="home_data_two">
                  <div class="home_data_num">
                    <font class="font1 qianlan" face="font01">663</font>
                    <span>人</span>
                  </div>
                  <div class="home_data_name">钢筋工</div>
                </li>
                <li class="home_data_three">
                  <div class="home_data_num">
                    <font class="font1 zise" face="font01">862</font>
                    <span>人</span>
                  </div>
                  <div class="home_data_name">瓦工</div>
                </li>
              </ul>

            </div>
          </div>
        <div class="top_box_right">
          <div class="p2_rT">
            <span class="j_1"></span>
            <span class="j_2"></span>
            <span class="j_3"></span>
            <span class="j_4"></span>
            <div class="title"><img src="~@/assets/screen/screen1/images/page2/icon3.png" />社区概览</div>
            <div class="data_sqgl">
              <div class="data_box">
                <font class="font shenlan" face="font01">10025</font><span>人</span>
                <div class="data_title2">社区实有人口</div>
              </div>
              <div class="data_box">
                <font class="font zise" face="font01">8962</font><span>个</span>
                <div class="data_title2">户籍人口总数</div>
              </div>
            </div>
            <span class="line"></span>
            <div class="data_sqgl">
              <div class="data_box">
                <font class="font qianlan" face="font01">10025</font><span>人</span>
                <div class="data_title2">暂住证未办理人数</div>
              </div>
              <div class="data_box">
                <font class="font huangse" face="font01">8962</font><span>个</span>
                <div class="data_title2">持有暂住证人数</div>
              </div>
            </div>

            <ul class="shequ_charts">
              <li id="chartsdiv1"></li>
              <li id="chartsdiv2"></li>
            </ul>
            <ul class="home_data2">
              <li class="home_data_one">
                <div class="home_data_num">
                  <font class="font1 shenlan" face="font01">456</font>
                  <span>户</span>
                </div>
                <div class="home_data_name">流动人口</div>
              </li>
            </ul>
            <ul class="home_data2">
              <li class="home_data_two">
                <div class="home_data_num">
                  <font class="font1 qianlan" face="font01">456</font>
                  <span>户</span>
                </div>
                <div class="home_data_name">特殊人群</div>
              </li>
            </ul>
          </div>
          <div class="p2_rB">
            <span class="j_1"></span>
            <span class="j_2"></span>
            <span class="j_3"></span>
            <span class="j_4"></span>
            <div class="title"><img src="~@/assets/screen/screen1/images/page2/icon5.png" />车位概览</div>
            <div class="data_cwgl">
              <div class="data_box">
                <font class="font zise" face="font01">14</font><span>个</span>
                <div class="data_title2">特殊车辆</div>
              </div>
              <div class="data_box">
                <font class="font qianlan" face="font01">120</font><span>个</span>
                <div class="data_title2">在场车辆数</div>
              </div>
              <div class="data_box">
                <font class="font shenlan" face="font01">314</font><span>个</span>
                <div class="data_title2">总车位数</div>
              </div>
            </div>
          </div>
        </div>



      </div>
      <div class="bottom_box">
        <div class="bottom_left">
          <span class="j_1"></span>
          <span class="j_2"></span>
          <span class="j_3"></span>
          <span class="j_4"></span>
          <div class="title"><img src="~@/assets/screen/screen1/images/page2/icon7.png" />试验检测报告</div>
        </div>
        <div class="bottom_center">
          <span class="j_1"></span>
          <span class="j_2"></span>
          <span class="j_3"></span>
          <span class="j_4"></span>
          <div class="title"><img src="~@/assets/screen/screen1/images/page2/icon7.png" />试验检测报告</div>
        </div>
        <div class="bottom_right">
          <span class="j_1"></span>
          <span class="j_2"></span>
          <span class="j_3"></span>
          <span class="j_4"></span>
          <div class="title"><img src="~@/assets/screen/screen1/images/page2/icon7.png" />试验检测报告</div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>

  import { formatTime1 } from "@/utils";
  import mapData from '@/data/map.json';
  import { loadProjectTotalData } from "@/api";
  import echarts from 'echarts';

  export default {
    name: "screen1",
    data() {
      return {
        index: true,
        title: "国道110公路工程计量",
        dateDay: null,
        dateYear: null,
        dateWeek: null,
        weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
        projectId: null,
        tab1Class: "tab1 active",
        tab2Class: "tab2",
        mapData: mapData,
        // 地图
        map: null,
        projectData: {
          data1: {
            currentTotal: null,
            currentEndTotal: null,
          },
          data2: {
            xAxis: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
            series: [6, 9, 23, 25, 84, 124, 129, 154, 168, 168, 188, 213, 254, 268, 288, 315, 319, 380, 540, 555, 600, 613, 628, 659, 684, 700, 726, 748, 846, 912],
          },
          data3: {
            percentage: [0.54, 0.68, 0.84, 0.32, 0.58, 1, 0.21, 0.96],
            grayBar: [1, 1, 1, 1, 1, 1, 1, 1],
            name: [ '房建工程', '机电工程','绿化及环境保护工程', '安全设施及预埋管线', '桥梁、涵洞', '路 面', '路 基', ' 总 则']
          }
        }
      }
    },

    created() {
      this.projectId = this.$route.query.projectId;
      document.title = this.$route.query.name;
      console.log("可视化大屏一页面执行created方法");
    },
    mounted() {
      // this.cancelLoading();
      this.timeFn();
      this.loadData();
      console.log("可视化大屏一页面执行mounted方法");
    },
    methods: {
      timeFn() {
        this.timing = setInterval(() => {
          this.dateDay = formatTime1(new Date(), 'HH: mm: ss')
          this.dateYear = formatTime1(new Date(), 'yyyy-MM-dd')
          this.dateWeek = this.weekday[new Date().getDay()]
        }, 1000)
      },
      handleTabClick(index) {
        if (index == 1) {
          this.index = true;
          this.title = "国道110公路工程计量";
          this.tab1Class = "tab1 active";
          this.tab2Class = "tab2";
        } else {
          this.index = false;
          this.title = "国道110公路现场管理";
          this.tab1Class = "tab1";
          this.tab2Class = "tab2 active";
        }
        this.loadData();
      },
      loadData() {
        if (this.index) {
          this.loadMap();
          this.getData1();
          this.getData2();
          this.getData3();
        } else {
          this.reloadMap();
        }
      },
      loadMap() {
        if (this.mapData) {
          this.mapData.project.forEach(project => {
            if (project.projectId == this.projectId) {
              this.data = project.data;
              this.initMap(this);
            }
          });
        }
      },
      initMap(_this) {
        _this.map = new AMap.Map('center_map', {
          center: _this.data.center,
          zoom: _this.data.zoom,
          // viewMode: '3D',
        });
        _this.map.setMapStyle("amap://styles/darkblue");

        // 线路图
        _this.data.lines.forEach(line => {
          let lines = new AMap.Polyline({
            path: line.data,
            strokeColor: '#2f83de',
            // strokeColor: line.color,
            strokeOpacity: 1,
            strokeWeight: 8,
            strokeStyle: "solid",
            lineJoin: "round",
            showDir: true,
            lineCap: "round",
            geodesic: true // 设置为true表示绘制大地线（弧线）
          });
          _this.map.add(lines);
        });
      },
      reloadMap() {
        if (this.map) {
          this.map.destroy();
        }
      },
      getData1() {
        loadProjectTotalData(this.projectId).then(response => {
          console.log(response);
          this.projectData.data1.currentTotal = 84;
          this.projectData.data1.currentEndTotal = 912;
        });
      },
      getData2() {
        //页面交互、数据
        let myChart1 = echarts.init(document.getElementById('echarts_data1'));
        let option1 = {
          color: ['#0345A2'],
          title: {
            default: false
          },
          //整个图表位置
          grid: {
            left: '1%',
            right: '4%',
            bottom: '10%',
            top: '15%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis'
          },
          toolbox: {
            show: false
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.projectData.data2.xAxis,
            axisLabel: {
              interval: 1
            },
            axisLine: {
              lineStyle: {
                color: '#0345A2', // 颜色
                width: 1, // 粗细
                type: 'solid'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#86BED3'
              }
            },
            //辅助线
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色
                color: '#143260',
                type: 'dashed'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#0345A2', // 颜色
                width: 1, // 粗细
                type: 'solid'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#86BED3'
              }
            },
            //辅助线
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色
                color: '#143260',
                type: 'dashed'
              }
            }
          },
          series: [{
            name: '累计完成',
            type: 'line',
            smooth: true,
            data: this.projectData.data2.series,
            symbol: 'none',
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#023D7D' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#0B1842' // 100% 处的颜色
              }])
            },
            markLine: {
              show: false
            }
          }]
        };
        myChart1.setOption(option1);
      },
      getData3() {
        let myChart1 = echarts.init(document.getElementById('progress1_chart'));
        let _this = this;
        let option = {
          grid: {
            left: '5%', //如果离左边太远就用这个......
            right: '5%',
            bottom: '-2%',
            top: '5%',
            containLabel: true
          },
          xAxis: [{
            show: false,
          },
            {
              show: false,
            }
          ],
          yAxis: {
            type: 'category',
            axisLabel: {
              show: true, //让Y轴数据不显示
            },

            axisTick: {
              show: false, //隐藏Y轴刻度
            },
            axisLine: {
              show: false, //隐藏Y轴线段
            },
          },
          series: [
            //背景色
            {
              show: true,
              type: 'bar',
              barGap: '-100%',
              barWidth: '15%', //统计条宽度
              itemStyle: {
                normal: {
                  barBorderRadius: 50,
                  color: 'rgba(41, 55, 94)'
                },
              },
              z: 1,
              data: this.projectData.data3.grayBar,
            },
            //蓝条
            {
              show: true,
              type: 'bar',
              barGap: '-100%',
              barWidth: '15%', //统计条宽度
              itemStyle: {
                normal: {
                  barBorderRadius: 50, //统计条弧度
                  color: {
                    colorStops: [{
                      offset: 0,
                      color: '#5d29f7' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#5093fb' // 100% 处的颜色
                    }],
                    globalCoord: false, // 缺省为 false

                  }
                },
              },
              max: 1,
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: '#ccc', //百分比颜色
                    fontSize: 18
                  },
                  position: [0, '-20'],
                  rich: { //富文本
                    green: {
                      color: '#70DDA7',
                      fontSize: 18
                    },
                    yellow: {
                      color: '#CCB877',
                      fontSize: 18
                    },
                    red: {
                      color: '#B916DE',
                      fontSize: 18
                    }
                  },
                  formatter: function(data) {
                    // console.log(data.dataIndex);
                    //富文本固定格式{colorName|这里填你想要写的内容}
                    //富文本固定格式{colorName|这里填你想要写的内容}
                    // console.log(this.projectData.data3);
                    return _this.projectData.data3.name[data.dataIndex]
                    // if(paiming[data.dataIndex] == 1) {
                    //   return '{start1|}{red|'  + '  ' + this.projectData.data3.name[data.dataIndex] + '}';
                    // } else if(paiming[data.dataIndex] == 2) {
                    //   return '{start1|}{yellow|' + '  ' + this.projectData.data3.name[data.dataIndex] + '}';
                    // } else if(paiming[data.dataIndex] == 3) {
                    //   return '{start1|}{green|' + '  ' + this.projectData.data3.name[data.dataIndex] + '}';
                    // } else {
                    //   return '{start2|}{white|' + '  ' + this.projectData.data3.name[data.dataIndex] + '}';
                    // }
                    // if(this.projectData.data3.name[data.dataIndex] == 1 || this.projectData.data3.name[data.dataIndex] == 2 || this.projectData.data3.name[data.dataIndex] == 3) {
                    //   return '{yellow|' + '  ' + this.projectData.data3.name[data.dataIndex] + '}';
                    // } else {
                    //   return this.projectData.data3.name[data.dataIndex]
                    // }
                  },

                }
              },
              data: this.projectData.data3.percentage,
            },
          ]
        };
        myChart1.setOption(option);
      },
    }
  }

</script>

<style lang="scss" scoped>
  @import "~@/assets/screen/screen1/scss/common.scss";
  @import "~@/assets/screen/screen1/scss/index.scss";
  @import "~@/assets/screen/screen1/scss/reset.scss";
  .map {
    width: 100%;
    height: 75vh;
  }
  ::v-deep .amap-logo {
    display: none;
    opacity: 0 !important;
  }
  ::v-deep .amap-copyright {
    opacity: 0;
  }
</style>
